<template>
    <div class="blogger_info">
        <Change_header title="Another的资料" />
        <div class="red_model"></div>
        <div class="topic_block">
            <img src="../../images/mainTwo/blogger/01.png" />
            <p class="blogger_name">Another</p>
            <p>217粉丝</p>
            <div class="operation">
                <p>
                    <span>
                        <router-link to="/onlineChat">和ta聊天</router-link>
                    </span>
                </p>
                <p>
                    <span>
                        关注ta
                    </span>
                </p>
            </div>
        </div>
        <div class="foundation_block">
            <img src="../../images/mainOne/learningBeauty/IMG_bianmeixue_01.png" />
            <p class="description">今日推荐 &nbsp;&nbsp;底妆全靠它 春日幻彩</p>
        </div>
        <div class="foundation_block">
            <img src="../../images/mainOne/learningBeauty/IMG_bianmeixue_02.png" />
            <p class="description">今日推荐 &nbsp;&nbsp;底妆全靠它 春日幻彩</p>
        </div>
        <div class="foundation_block">
            <img src="../../images/mainOne/learningBeauty/IMG_bianmeixue_03.png" />
            <p class="description">今日推荐 &nbsp;&nbsp;底妆全靠它 春日幻彩</p>
        </div>
    </div>
</template>
<script>
import Change_header from "../../components/changeHeader"
export default {
    name: 'bloggeInfo',
    components: { Change_header }
}
</script>
<style lang="less" scoped>
@pub_main_bgcolor :#ff406f;
.red_model {
    background: @pub_main_bgcolor;
    height: 300/72rem;
    width: 100%;
    margin-top: -2px;
}

.topic_block {
    width: 710/75rem;
    height: 290/75rem;
    border: 1px solid #ccc;
    box-shadow: 0 0 15px #ccc;
    margin: 0 auto;
    border-radius: 15px;
    position: relative;
    margin-top: -150/72rem;
    background: #fff;
    padding-top: 20/75rem;
    img {
        width: 140/75rem;
        height: 140/75rem;
        margin: 0 auto;
    }
    .blogger_name {
        font-size: 30/75rem;
    }
    p {
        text-align: center;
        font-size: 26/75rem;
        font-weight: 100;
    }
    .operation {
        p {
            margin-left: 120/75rem;
            width: 3rem;
            float: left;
            span {
                display: inline-block;
                line-height: 40/75rem;
                border: 1px solid #000;
                border-radius: 30/75rem;
                ;
                padding: 0 15/75rem;
                font-size: 24/75rem;
            }
        }
        p:first-child {
            text-align: right;
            margin-left: 40/75rem;
            span{
                a{
                    color: #000;
                }
            }
        }
    }
}

.foundation_block {
    width: 710/75rem;
    padding-top: 20/75rem;
    margin: 20/75rem auto;
    box-shadow: 5px 0 15px #ccc;
    img {
        width: 670/75rem;
        height: 320/75rem;
        margin: 0 auto;
    }
    .description {
        width: 670/75rem;
        margin: 0 auto;
        font-size: 30/75rem;
        line-height: 60px;
        margin-bottom: 25/75rem;
    }
}
</style>

